<template>
  <div class="HighPressure">
    <div class="center">
      <el-form :model="isFtp" ref="isFtp" label-width="200px" :rules="rules">
        <el-form-item :label="$t('启用') + '：'" prop="ftpEnable1011">
          <div class="isopen">
            <el-switch
              v-model="isFtp.ftpEnable1011"
              :active-value="1"
              :inactive-value="0"
              active-color="#00D1FF"
              inactive-color="#dcdfe6"
              active-text="ON"
              inactive-text="OFF"
            >
            </el-switch>
          </div>
        </el-form-item>
        <div v-if="isFtp.ftpEnable1011">
          <el-form-item label="SSL：" prop="ftpSsl1011">
            <el-radio-group v-model="isFtp.ftpSsl1011">
              <el-radio :label="0">{{ $t("启用") }}</el-radio>
              <el-radio :label="1">{{ $t("不启用") }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="$t('服务器地址')" prop="ftpIp1011">
            <el-input v-model="isFtp.ftpIp1011"></el-input>
          </el-form-item>
          <el-form-item :label="$t('端口') + '：'" prop="ftpPort1011">
            <el-input v-model="isFtp.ftpPort1011"></el-input>
          </el-form-item>
          <el-form-item
            :label="$t('用户名') + '：'"
            prop="ftpUsername1011"
            class="location"
          >
            <div class="left-center">
              <el-input v-model="isFtp.ftpUsername1011"></el-input>
            </div>
            <div class="right-center">
              <el-checkbox
                :true-label="1"
                :false-label="0"
                v-model="isFtp.ftpIsAnon"
                style="margin-left: 10px"
                >{{ $t("匿名登录") }}</el-checkbox
              >
            </div>
          </el-form-item>
          <el-form-item :label="$t('密码') + '：'" prop="ftpPassword1011">
            <el-input
              v-model="isFtp.ftpPassword1011"
              password
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('确认密码') + '：'" prop="Password1011">
            <el-input
              type="password"
              v-model="isFtp.Password1011"
              :placeholder="$t('请输入确认密码')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('目录结构') + '：'" prop="ftpRoot1011">
            <el-select v-model="isFtp.ftpRoot1011" placeholder="请选择目录结构">
              <el-option :label="$t('保存在根目录')" value=""></el-option>
              <el-option :label="$t('使用一级目录')" value="1"></el-option>
              <el-option :label="$t('使用二级目录')" value="2"></el-option>
            </el-select>
          </el-form-item>
          <template v-if="isFtp.ftpRoot1011 == 1">
            <el-form-item
              v-if="isFtp.ftpEnable1011"
              :label="$t('一级目录') + '：'"
              prop="ftpOne"
            >
              <el-input v-model="isFtp.ftpOne"></el-input>
            </el-form-item>
          </template>
          <template v-if="isFtp.ftpRoot1011 == 2">
            <el-form-item
              v-if="isFtp.ftpEnable1011"
              :label="$t('一级目录') + '：'"
              prop="ftpOne"
            >
              <el-input v-model="isFtp.ftpOne"></el-input>
            </el-form-item>
          </template>
          <template v-if="isFtp.ftpRoot1011 == 2">
            <el-form-item
              v-if="isFtp.ftpEnable1011"
              :label="$t('二级目录') + '：'"
              prop="ftpTwo"
            >
              <el-input v-model="isFtp.ftpTwo"></el-input>
            </el-form-item>
          </template>
          <el-form-item :label="$t('文件传输范围') + '：'">
            <el-checkbox-group v-model="isFtp.ftpFileRange">
              <el-checkbox :label="0">{{ $t("可见光照片文件") }}</el-checkbox>
              <el-checkbox :label="1">{{ $t("红外照片文件") }}</el-checkbox>
              <el-checkbox :label="2">{{ $t("红外图谱文件") }}</el-checkbox>
              <el-checkbox :label="3">{{ $t("可见光视频文件") }}</el-checkbox>
              <el-checkbox :label="4">{{ $t("红外视频文件") }}</el-checkbox>
              <el-checkbox :label="5">{{ $t("音频文件") }}</el-checkbox>
              <el-checkbox :label="6">{{ $t("巡视路线文件") }}</el-checkbox>
              <el-checkbox :label="7">{{ $t("地图文件") }}</el-checkbox>
              <el-checkbox :label="8">{{ $t("设备点位模型文件") }}</el-checkbox>
              <el-checkbox :label="9">{{ $t("机器人模型文件") }}</el-checkbox>
              <el-checkbox :label="10">{{ $t("巡检报告") }}（PDF）</el-checkbox>
              <el-checkbox :label="11"
                >{{ $t("巡检报告") }}（Excel）</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </div>
        <el-form-item>
          <div class="btns area-btn">
            <div
              @click="submitForm('isFtp')"
              class="serch-btn cursor-pointer"
              style="width: 80px"
            >
              {{ $t("保存") }}
            </div>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getConfig, saveConfig } from "@/api/system/network";
export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.isFtp.ftpPassword1011 !== value) {
        callback(new Error(this.$t("两次输入的密码不一致")));
      } else {
        callback();
      }
    };
    return {
      isFtp: {
        ftpEnable1011: "",
        ftpSsl1011: 0,
        ftpIp1011: "",
        ftpPort1011: "",
        ftpUsername1011: "",
        ftpIsAnon: 0,
        ftpPassword1011: "",
        Password1011: "",
        ftpRoot1011: "",
        ftpFileRange: [],
        ftpOne: "",
        ftpTwo: "",
      },
      rules: {
        ftpIp1011: [
          { required: true, message: "请输入服务器地址", trigger: "blur" },
          {
            pattern:
              /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/,
            message: "请输入正确的IP",
            trigger: "blur",
          },
        ],
        ftpPort1011: [
          { required: true, message: "请输入端口", trigger: "blur" },
          {
            pattern: /^\d+$/,
            message: "请输入正确的端口",
            trigger: "blur",
          },
        ],
        ftpUsername1011: [
          { required: true, message: "请输入端口", trigger: "blur" },
        ],
        ftpPassword1011: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
        Password1011: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { required: true, validator: equalToPassword, trigger: "blur" },
        ],
        ftpOne: [
          { required: true, message: "请输入文件名", trigger: "blur" },
          {
            pattern: /^[^~\x22]+[^~\\x22]+/,
            message: "文件名不能包含特殊符合",
            trigger: "blur",
          },
        ],
        ftpTwo: [
          { required: true, message: "请输入文件名", trigger: "blur" },
          {
            pattern: /^[^~\x22]+[^~\\x22]+/,
            message: "文件名不能包含特殊符合",
            trigger: "blur",
          },
        ],
        // ftpRoot1011: [
        //   { required: true, message: "请输入选择文件目录", trigger: "blur" },
        // ],
      },
    };
  },
  created() {
    this.handelGetFto();
  },
  mounted() {},
  methods: {
    // 保存按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let str = "";
          if (this.isFtp.ftpRoot1011 === "") {
            str = "";
          } else if (this.isFtp.ftpRoot1011 === "1") {
            str = "/" + this.isFtp.ftpOne;
          } else if (this.isFtp.ftpRoot1011 === "2") {
            str = "/" + this.isFtp.ftpOne + "/" + this.isFtp.ftpTwo;
          }
          let obj = {
            ftpEnable1011: this.isFtp.ftpEnable1011,
            ftpSsl1011: this.isFtp.ftpSsl1011,
            ftpIp1011: this.isFtp.ftpIp1011,
            ftpPort1011: this.isFtp.ftpPort1011,
            ftpUsername1011: this.isFtp.ftpUsername1011,
            ftpIsAnon: this.isFtp.ftpIsAnon,
            ftpPassword1011: this.isFtp.ftpPassword1011,
            Password1011: this.isFtp.Password1011,
            ftpRoot1011: str,
            ftpFileRange: this.isFtp.ftpFileRange.join(","),
          };
          saveConfig(obj).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("保存成功"),
                duration: 2000,
              });
            } else {
              this.$message({
                showClose: true,
                message: this.$t("保存失败请重试"),
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取 ftp 数据
    handelGetFto() {
      getConfig().then((res) => {
        this.isFtp.ftpIsAnon = res.data.ftpIsAnon * 1;
        this.isFtp.ftpSsl1011 = res.data.ftpSsl1011 * 1;
        this.isFtp.ftpFileRange = res.data.ftpFileRange
          .split(",")
          .map((item) => item * 1);
        this.isFtp.ftpIp1011 = res.data.ftpIp1011;
        this.isFtp.ftpPort1011 = res.data.ftpPort1011;
        this.isFtp.ftpUsername1011 = res.data.ftpUsername1011;
        this.isFtp.ftpPassword1011 = res.data.ftpPassword1011;
        this.isFtp.ftpEnable1011 = res.data.ftpEnable1011 * 1;
        this.isFtp.ftpOne = res.data.ftpRoot1011.slice(1).split("/")[0] || "";
        this.isFtp.ftpTwo = res.data.ftpRoot1011.slice(1).split("/")[1] || "";
        if (res.data.ftpRoot1011 == "") {
          this.isFtp.ftpRoot1011 = "";
        } else if (res.data.ftpRoot1011 == "/" + this.isFtp.ftpOne) {
          this.isFtp.ftpRoot1011 = "1";
        } else if (
          res.data.ftpRoot1011 ==
          "/" + this.isFtp.ftpOne + "/" + this.isFtp.ftpTwo
        ) {
          this.isFtp.ftpRoot1011 = "2";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.HighPressure {
  width: 100%;
  height: 950px;
  .center {
    width: 1155px;
    padding: 20px;
  }
}

.isopen {
  ::v-deep .el-switch__label--left {
    position: relative;
    left: 55px;
    color: #fff !important;
    z-index: -1111;
  }
  ::v-deep.el-switch__core {
    width: 60px !important;
  }
  ::v-deep.el-switch__label--right {
    position: relative;
    right: 56px;
    color: #fff;
    z-index: -1111;
  }
  ::v-deep.el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  ::v-deep.el-switch__label--left.is-active {
    z-index: 1111;
    color: #fff !important;
  }
}
.location {
  position: relative;
  .right-center {
    position: absolute;
    top: 0px;
    left: 310px;
  }
}
::v-deep .el-input__inner {
  width: 300px;
}
</style>
